import { useRequest } from 'ahooks';
import { Space, Tooltip } from 'antd';

import Text from '@/components/text';

import { equDefectStatistics } from '@/services/bizApi/shebaoquexianjiekou';
import { Icon } from '@iconify/react/dist/iconify.js';

const Statistics = (props: { activeType: string; onActiveTypeChange: (type: string) => void }) => {
  const count = useRequest(
    async () => {
      return await equDefectStatistics().then((res) => {
        return res.data;
      });
    },
    {
      refreshDeps: []
    }
  );

  return (
    <div>
      <Space size={16} style={{ marginBottom: '20px', fontWeight: 'bold', cursor: 'pointer' }}>
        <div
          onClick={() => props.onActiveTypeChange('1')}
          style={{ color: props.activeType === '1' ? 'var(--ant-color-primary)' : '' }}
        >
          <Tooltip title="截至昨天9点所有未完成数">
            <Icon
              style={{ verticalAlign: 'text-bottom' }}
              color="#666"
              fontSize={16}
              icon="ri:question-line"
            />
            昨天总数 ：
          </Tooltip>
          <Text>{count.data?.value1 || 0}</Text>
        </div>
        <div
          onClick={() => props.onActiveTypeChange('2')}
          style={{ color: props.activeType === '2' ? 'var(--ant-color-primary)' : '' }}
        >
          <Tooltip title="截至昨天9点,维修班组长安排人员后总数">
            <Icon
              style={{ verticalAlign: 'text-bottom' }}
              color="#666"
              fontSize={16}
              icon="ri:question-line"
            />
            昨天计划数 ：
          </Tooltip>
          <Text>{count.data?.value2 || 0}</Text>
        </div>
        <div
          onClick={() => props.onActiveTypeChange('3')}
          style={{ color: props.activeType === '3' ? 'var(--ant-color-primary)' : '' }}
        >
          <Tooltip title="昨天9点至今天9点上报数">
            <Icon
              style={{ verticalAlign: 'text-bottom' }}
              color="#666"
              fontSize={16}
              icon="ri:question-line"
            />
            昨天计划完成数 ：
          </Tooltip>
          <Text>{count.data?.value3 || 0}</Text>
        </div>

        <div
          onClick={() => props.onActiveTypeChange('4')}
          style={{ color: props.activeType === '4' ? 'var(--ant-color-primary)' : '' }}
        >
          <Tooltip title="截至今天9点所有未完成数">
            <Icon
              style={{ verticalAlign: 'text-bottom' }}
              color="#666"
              fontSize={16}
              icon="ri:question-line"
            />
            今天总数 ：
          </Tooltip>
          <Text>{count.data?.value4 || 0}</Text>
        </div>

        <div
          onClick={() => props.onActiveTypeChange('5')}
          style={{ color: props.activeType === '5' ? 'var(--ant-color-primary)' : '' }}
        >
          <Tooltip title="截至今天9点维修班组长安排人后总数">
            <Icon
              style={{ verticalAlign: 'text-bottom' }}
              color="#666"
              fontSize={16}
              icon="ri:question-line"
            />
            今日计划数 ：
          </Tooltip>
          <Text>{count.data?.value5 || 0}</Text>
        </div>
      </Space>
    </div>
  );
};
export default Statistics;
